<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>实验室修改</title>
    <link th:href="@{/img/Bandit.ico}" rel="icon">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{commons/common::BackHeader}"></div>
    <div class="layui-body">
        <fieldset class="layui-elem-quote">修改信息</fieldset>
        <form class="layui-form" id="teacherAdd" style="width: 1680px">
            <!--id-->
            <div class="layui-form-item" hidden>
                <label class="layui-form-label">id</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="labID" id="labID" th:value="${lab.labID}">
                </div>
            </div>
            <!--名字-->
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="labName" id="labName" th:value="${lab.labName}" placeholder="输入实验室名" autocomplete="false" required lay-verify= "required">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="labDetails" id="labDetails" th:text="${lab.labDetails}"  placeholder="输入描述" autocomplete="false" required lay-verify= "required"></textarea>

                </div>
            </div>
            <!--图片上传-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <br>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="lab-img">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="img01" th:src="${lab.labImg}" style="width: 300px;height: auto">
                        </div>
                    </div>
                    <input type="text" name="labImg" id="labImg" th:value="${lab.labImg}" hidden>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit id="save_btn">点击发布</button>
                </div>
            </div>
        </form>


    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['upload'],function(){
        var upload = layui.upload;
        upload.render({
            elem: '#lab-img'
            ,url: prefix_back + '/uploadImage'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#img01').attr('src', result); //图片链接（base64）
                })}
            ,done: function(res, index, upload){ //上传后的回调
                console.log(res);
                $('#labImg').prop('value',res.url);
            }
        })
    })
</script>
<script type="text/javascript">
    var prefix_back = '/back/lab';
    $('#teacherAdd').on('submit', function (e){
        let layer;
        layui.use(['layer','upload'],function(){
            layer = layui.layer;
            layer.load(1);
        })
        e.preventDefault();
        let Data = $(this).serializeArray();
        console.log(Data);
        $.ajax({
            type: 'POST',
            url: prefix_back + '/editConfirm',
            data: {
                "labID":Data[0].value,
                "labName":Data[1].value,
                "labDetails":Data[2].value,
                "labImg":Data[3].value,
            },
            dataType: 'json',
            success: function (res) {
                console.log(res.msg);
                parent.layer.closeAll();
                layer.msg('修改成功！');
                setTimeout(function(){
                    parent.layer.closeAll();
                    window.location.href = prefix_back + '/list';
                },2000)
            },
            error: function () {
                console.log("错误");
            }
        })
    });
</script>
</body>
</html>